<template>
    <div class="legal">
        <!-- 广告位 start -->
        <div class="j_jypx_gg">
            <img src="../../assets/newimg/legal/list_banner2.png" alt="" />
        </div>
        <!-- 广告位 end -->

        <!-- 热门法律资讯 end -->
        <div class="j_title">
            <span>热门法律资讯</span>
        </div>
        <div class="j_legal_swiper">
            <div class="j_legal_sbox">
                <div class="j_legal_swrap j_legal_img">
                    <a
                        v-for="(item, index) in legalcalssList"
                        :key="index"
                        @click="getlegaldetialList(item.legal_category_id)"
                    >
                        <h1>
                            <div>
                                <img
                                    :src="
                                        require('../../assets/newimg/legal/' +
                                            item.icon)
                                    "
                                    :alt="item.legal_cate_name"
                                />
                            </div>
                        </h1>
                        <p>{{ item.legal_cate_name }}</p>
                    </a>
                </div>
            </div>
        </div>
        <!-- 热门法律资讯 end -->

        <!-- 律所推荐 end -->
        <div class="j_title">
            <span>律所推荐</span>
        </div>
        <div class="j_lstj_box">
            <!-- 选择部分 -->
            <!-- 排序按钮 -->
            <nav class="storenav p search_list_dump">
                <ul>
                    <div
                        class="j_check_box"
                        v-for="(itemr, i) in navCheckDowList"
                        :key="i"
                    >
                        <li @click="navCheckClick(itemr)">
                            <span class="lb">{{ itemr.name }}</span>
                            <i
                                :class="{
                                    pd: itemr.checkType == 0,
                                    pc: itemr.checkType == 0 && itemr.ischeck,
                                    pr: itemr.checkType == 1,
                                    bpr1: itemr.checkType == 1 && itemr.ischeck,
                                    fitter: itemr.checkType == 2,
                                    listorimg: itemr.checkType == 3,
                                }"
                            ></i>
                        </li>
                        <div
                            class="shadow"
                            style="z-index: 99"
                            v-if="itemr.ischeck && itemr.checkType == 0"
                            @click="itemr.ischeck = !itemr.ischeck"
                        ></div>

                        <div class="j_sel_option" v-show="itemr.ischeck">
                            <ul class="j_sel_optionul">
                                <li
                                    :class="{
                                        j_sel_optionactive:
                                            itemr.checkName == item.nameli,
                                    }"
                                    v-for="(item, index) in itemr.checkList"
                                    :key="index"
                                    @click="changenavCheckFn(itemr, item)"
                                >
                                    <span>{{ item.nameli }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </nav>

            <!-- 列表部分 -->
            <div class="j_lstjlist">
                <div class="j_lstj_ul3">
                    <a
                        v-for="(item, index) in legalShopList"
                        :key="index"
                        @click="
                            (propsTwoKey = !propsTwoKey),
                                (propsTwoId = item.legal_id),
                                (tieleVal = item.legal_name)
                        "
                    >
                        <dl>
                            <dd>
                                <img :src="item.legal_img" alt="" />
                            </dd>
                            <dt>
                                <h1>{{ item.legal_name }}</h1>
                                <h2>
                                    <i
                                        >{{
                                            item.legal_intro.substring(0, 12)
                                        }}...</i
                                    >
                                    <span>立即咨询</span>
                                </h2>
                            </dt>
                        </dl>
                    </a>
                </div>
            </div>
        </div>
        <div class="j_shadow"></div>
        <!-- 律所推荐 end -->

        <!-- 弹窗二 -->
        <van-popup v-model="propsTwoKey" round closeable>
            <div class="ed_props_box2">
                <h1>{{ tieleVal }}</h1>
                <h2>*请填写真实有效信息</h2>

                <div class="form_li">
                    <label>姓名</label>
                    <input
                        type="text"
                        placeholder="请输入姓名"
                        class="van-field__control"
                        v-model="propTwoInfo.true_name"
                    />
                </div>

                <div class="form_li">
                    <label>手机号</label>
                    <input
                        type="tel"
                        placeholder="请输入手机号"
                        class="van-field__control"
                        v-model="propTwoInfo.mobile"
                    />
                </div>

                <div class="form_li" @click="ischeckCity = true">
                    <label>城市</label>
                    <input
                        type="text"
                        placeholder="请输入城市"
                        readonly
                        class="van-field__control"
                        v-model="addResval"
                    />
                </div>

                <div class="smalBtn smalBtn_class" @click="submitPropoTwo()">
                    <span>下一步</span>
                </div>

                <h4>个人信息将会严格按照监管要求加密保存</h4>
            </div>
        </van-popup>

        <!-- 地址选择组件 -->
        <component
            :is="'Addres'"
            v-if="ischeckCity"
            @checkAddresData="checkAddresfn"
            @closeAddresProps="closeAddresPropsfn"
        ></component>

        <component
            :is="'ContentNone'"
            :isgoShop="false"
            v-show="legalShopList.length <= 0"
        ></component>

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            navCheckDowList: [
                {
                    name: '省份',
                    checkName: '北京市',
                    checkIndex: 0,
                    checkType: 0,
                    ischeck: false,
                    checkList: [
                        {
                            id: 0,
                            nameli: '北京市',
                        },
                        {
                            id: 1,
                            nameli: '云南省',
                        },
                        {
                            id: 2,
                            nameli: '河北省',
                        },
                    ],
                },
                {
                    name: '服务范围',
                    checkName: '1km',
                    checkIndex: 0,
                    checkType: 0,
                    ischeck: false,
                    checkList: [
                        {
                            id: 0,
                            nameli: '1km',
                        },
                        {
                            id: 1,
                            nameli: '5km',
                        },
                        {
                            id: 2,
                            nameli: '10km',
                        },
                    ],
                },
            ],
            legalcalssList: [],
            cat_id: '',
            legalShopList: [],

            // 弹窗相关
            propsTwoKey: false,
            propsTwoId: '',
            ischeckCity: false,
            addResval: '',
            tieleVal: '',
            propTwoInfo: {
                true_name: '',
                mobile: '',
                province: '',
                city: '',
                district: '',
            },
        };
    },
    computed: {},
    mounted() {
        this.getlegalclass();
    },
    methods: {
        // 提交弹窗信息
        submitPropoTwo() {
            let num = 0;
            for (let i in this.propTwoInfo) {
                if (this.propTwoInfo[i]) {
                    num++;
                }
            }

            if (num != 5) {
                return Toast({
                    message: '请补全信息',
                    duration: 2000,
                });
            }

            if (
                !/^1[3456789]\d{9}$/.test(
                    this.propTwoInfo.mobile.replace(/\s+/g, '')
                )
            ) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }

            axiosPost(
                '/api/legal/apply',
                {
                    legal_id: this.propsTwoId,
                    true_name: this.propTwoInfo.true_name,
                    mobile: this.propTwoInfo.mobile,
                    province: this.propTwoInfo.province,
                    city: this.propTwoInfo.city,
                    district: this.propTwoInfo.district,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.propsTwoKey = false;
                }
            );
        },
        // 关闭地址选择
        closeAddresPropsfn(data) {
            this.ischeckCity = data;
        },
        // 地址选择回调
        checkAddresfn(selectedOptions) {
            // console.log(selectedOptions);
            this.addResval = selectedOptions
                .map((option) => option.text)
                .join(' ');

            this.propTwoInfo.province = selectedOptions[0].value;
            this.propTwoInfo.city = selectedOptions[1].value;
            this.propTwoInfo.district = selectedOptions[2].value;
        },
        // 点击 nav 选项操作
        navCheckClick(itemr) {
            // 筛选
            if (itemr.checkType == 2) {
                this.slideSearch = !this.slideSearch;
                return;
            }

            // 展示方式
            if (itemr.checkType == 3) {
                this.showType = !this.showType;
                return;
            }

            // 其他
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                switch (el.checkType) {
                    case 0: // 没有子选项
                        if (!itemr.ischeck) {
                            el.ischeck = false;
                            if (el.name == itemr.name) {
                                el.ischeck = true;
                            }
                        } else {
                            el.ischeck = false;
                        }
                        break;
                    case 1:
                        if (el.name == itemr.name) {
                            el.ischeck = !el.ischeck;
                        }

                        break;
                    default:
                        break;
                }

                return el;
            });
        },
        // 导航子选项点击
        changenavCheckFn(itemr, item) {
            this.navCheckDowList = this.navCheckDowList.map((el) => {
                if (itemr.name == el.name) {
                    el.name = item.nameli;
                    el.checkName = item.nameli;
                    el.checkIndex = item.id;
                    el.ischeck = false;
                }
                return el;
            });
        },
        // 获取培训分类列表
        getlegalclass() {
            axiosPost('/api/legal/category', {}, (res) => {
                // console.log(res);
                this.legalcalssList = res.data;
                if (this.legalcalssList.length > 0) {
                    this.getlegaldetialList(
                        this.legalcalssList[0].legal_cate_id
                    );
                }
            });
        },
        // 获取培训商品列表
        getlegaldetialList(legal_cate_id) {
            this.cat_id = legal_cate_id;
            this.getShoplist();
        },
        // 商品列表
        getShoplist(page = 0, page_size = 20) {
            axiosPost(
                '/api/legal/lists',
                {
                    page: page,
                    page_size: page_size,
                    cat_id: this.cat_id,
                },
                (res) => {
                    // console.log(res);
                    this.legalShopList = res.data.data;
                }
            );
        },
    },
};
</script>
<style lang="less" scope src="../../assets/css/proposTwo.less"></style>
<style scope src="../../assets/css/public.css"></style>
<style lang="less" scope>
.legal {
    .search_list_dump ul li {
        width: 50%;
    }
    .storenav{
        width: auto;
    }
    // 选择列表
    .j_check_box {
        position: relative;
    }
    .j_sel_option {
        border-top: 1px solid #e0e0e0;
        position: absolute;
        left: -0.4267rem;
        top: 1.91rem;
        max-height: 5rem;
        overflow-y: auto;
        width: 100%;
        background: #fff;
        z-index: 1000;
        display: block;

        .j_sel_optionactive {
            color: #fe333d;
        }

        li {
            float: none;
            height: 1.5667rem;
            line-height: 1.5667rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.85rem;
            width: 100%;
        }
    }

    .shadow {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999999;
        background: rgba(0, 0, 0, 0.5);
    }
}
</style>
